{% extends "../base.html" %}

{% block title %} Projects {% endblock %}

{% block projects %}
<script src="scripts/jquery-1.3.2.min.js"></script>
<script src="scripts/jquery-ui-1.7.2.custom.min.js"></script>

<script type="text/javascript">
	
//	google.load("jquery", "1.3.2");
//	google.load("jqueryui", "1.7.2");
	
	window.onload = function() {

		//alert('url: ' ) ;
		$(".project-tasks-count").each( function (i) {
			    var elem = this ;
                sTool.updateTasksCount(elem.id.substring(6, elem.id.length), elem) ;
			}
			
		) ;
		
		$(".editProject").click(
			function(e) {
				sTool.clickLoadProjectSettings(e) ;
			}
		) ;
		
		$(".viewProject").click(
			function(e) {
                sTool.clickLoadProjectTasks(e) ;
//				sTool.clickLoadProjectInfo(e) ;
			}
		) ; 

        $("#create-project-link").click(
			function(e) {
				sTool.showCreateProjectDialog(e) ;
			}
		) ;

        
	};
	
</script>

	<div id="dialog"></div>
    <!--<form action="/projects" method="get">-->
        <!--<input type="text" name="qName"></input>-->
        <!--<input type="submit" value="Find"></input>-->
    <!--</form>-->
    
    <table cellpadding="0" cellspacing="0" class="list" id="projects-table">
    	<!--<thead>-->
    		<!--<th>Name</th>-->
    		<!--<th></th>-->
    		<!--<th>Created at</th>-->
    		<!--&lt;!&ndash;<th>Settings</th>&ndash;&gt;-->
    		<!--&lt;!&ndash;<th>Tasks count</th>&ndash;&gt;-->
   		<!--</thead>-->
    {% for project in projects %}
        <tr> 
            <td class="viewProject" id="view-{{ project.project.key }}">{{ project.project.name }}</td>
            <!--<td><a href="/tasks?projectId={{ project.project.key }}">{{ project.project.creator.nickname }}</a></td>-->
            <!--<td><a href="/tasks?projectId={{ project.project.key }}">{{ project.project.createdAt.day }}.{{project.project.createdAt.month}}.{{project.project.createdAt.year}} {{project.project.createdAt.hour}}:{{project.project.createdAt.minute}}</a></td>-->
            <td class="editProject" id="edit-{{ project.project.key }}">Edit</td>
            <td class="project-tasks-count" id="count-{{ project.project.key }}"></td>
        </tr>
    {% endfor %}
    </table>

        <!-- sample project row -->
        <table id="sample-project-row" style="display:none; ">


            <tr id="test" style="width:100%">
                <!--name-->
                <td class="viewProject" id="project-row-name"></td>
                <!--createdBy-->
                <!--<td id="project-row-createdBy"></td>-->
                <!--&lt;!&ndash;createdAt&ndash;&gt;-->
                <!--<td id="project-row-createdAt"></td>-->
                <!--&lt;!&ndash;edit&ndash;&gt;-->
                <td class="editProject" id="project-row-edit">Edit</td>
                <!--tasks-->
                <td class="project-tasks-tasks" id="project-row-tasks"></td>
            </tr>
        </table>

        <!-- project info table -->
        <table style="display:none;" id="project-info-table">
            <tr>
                <td>Project name: </td>
                <td id="project-name"></td>
            </tr>
            <tr>
                <td>Description: </td>
                <td id="project-descr"></td>
            </tr>
            <tr>
                <td>Created by: </td>
                <td id="project-createdBy"></td>
            </tr>
        </table>

        <!-- project settings markup -->
        <div id="project-settings" style="display:none;">
            <input type="hidden" id="edit-project-id"></input>
            <table>
                <tr>
                    <td>Project name: </td>
                    <td><input id="edit-project-name" name="edit-project-name" ></input><span class="error" id="edit-project-name-message"></span></td>
                </tr>
                <tr>
                    <td>Description: </td>
                    <td><textarea id="edit-project-descr" rows="5" cols="30"></textarea></td>
                </tr>
                <tr>
                    <td>Created by: </td>
                    <td id="edit-createdBy"></td>
                </tr>
            </table>
            <button id="edit-save-project" >Update</button>
        </div>

        <!-- Add project markup -->
        <div id="create-project" style="display:none;">

            <table>
                <tr>
                    <td>
                        <label for="create-project-name">Project name: </label>
                    </td>
                    <td>
                        <input id="create-project-name"name="create-project-name"></input><span class="error" id="create-project-name-message"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="create-project-descr">Description: </label>
                    </td>
                    <td>
                        <textarea id="create-project-descr" name="create-project-descr" rows="5" cols="30"></textarea>
                    </td>
                </tr>
            </table>

            <button id="create-project-button">Create</button>
        </div>


    <span id="create-project-link">Create new project</span>
    <!--<a href="/createProject" id="create-project-link">Create new project</a>-->

{% endblock %}

{% block tasks%}
    <table class="list" id="tasks-table" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th width="1%">#</th>
                <th width="40%">Name</th>
                <th width="10%">Created at</th>
                <th width="15%">Created by</th>
                <th width="15%">Assigned to</th>
                <th width="10%">Priority</th>
                <th width="10%">Status</th>
                <th width="1%">Edit</th>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
    <div id="create-task-link-div">Create</div>


    <!--sample tasks table row-->
    <table id="sample-task-row-table" style="display:none">
        <tr id="sample-task-row">
            <td id="sample-task-index"></td>
            <td id="sample-task-name"></td>
            <td id="sample-task-createdAt"></td>
            <td id="sample-task-createdBy"></td>
            <td id="sample-task-assignedTo"></td>
            <td id="sample-task-priority"></td>
            <td id="sample-task-status"></td>
            <td id="sample-task-edit"></td>
        </tr>
    </table>
    <span class="create-task-link" style="display:none;">Add task</span>

    <!--create task markup-->
    <div id="create-task" style="display:none">
        <span id="create-task-message" class="error"></span>
        <input type="hidden" id="create-task-projectId" name="create-task-projectId"></input>
        <table>
            <tr>
                <td>
                    No:
                </td>
                <td id="create-task-no">

                </td>
            </tr>
            <tr>
                <td>
                    <label for="create-task-name">Task name: </label>
                </td>
                <td>
                    <input maxlength="128" style="width: 400" id="create-task-name" name="create-task-name"></input>
                    <span id="create-task-name-message" class="error"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="create-task-description">Description: </label>
                </td>
                <td>
                    <textarea id="create-task-description" name="create-task-description" rows="3" cols="60"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="create-task-priority">Priority: </label>
                </td>
                <td>
                    <select name="create-task-priority" id="create-task-priority">
                        <option value="0">Low</option>
                        <option value="1" selected="selected">Medium</option>
                        <option value="2">High</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="create-task-assignedTo">Assign to: </label>
                </td>
                <td>
                    <input type="text" id="create-task-assignedTo" name="create-task-assignedTo"></input>
                    <span id="create-task-assignedTo-message" class="error"></span>
                </td>
            </tr>
        </table>

        <button id="create-task-save">Save</button>
    </div>


{% endblock %}
